<template>
  <div>
    <!-- 用户列表卡片 -->
    <el-card class="box-card">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item v-model="keywords" label="地址" label-width="70px">
          <el-select clearable v-model="formInline.city" placeholder="请选择">
            <el-option
              v-for="item in cities"
              :key="item.value"
              :label="item.label"
              :value="item.value">
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 10px">
          <el-input v-model="search" size="mini" placeholder="输入用户ID搜索" style="width: 200px; float: right;"
          @input="handleSearch"></el-input>
        </el-form-item>
      </el-form>
      <!-- 表格内容显示区域   -->
      <el-table
        :data="tableData"
        border
        style="width: 100%; height: 400px">
        <el-table-column
          prop="date"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="用户名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          width="180">
        </el-table-column>
        <el-table-column
          prop="price"
          label="票价">
        </el-table-column>
        <el-table class="show_data" v-show="isShow">
          <li v-for="(item,index) in result" v-bind:key="index">{{item}}</li>
        </el-table>
      </el-table>
      <!--   分页 -->
      <el-pagination
        style="padding-top: 15px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
      </el-pagination>
    </el-card>
  </div>
  
</template>
<script>
export default {
  name: 'Users',
  data () {
    return {
      keywords:'',//input绑定的关键字
      result:[],//搜索结果
      isShow:false,
      search:'',
      formInline: {
        user: '',
        email: '',
        city: '',
        radio: '1',
        nikeName: '',
      },
      currentPage4: 4,
      cities: [{
        value: 'Beijing',
        label: '北京'
      }, {
        value: 'Shanghai',
        label: '上海'
      }, {
        value: 'Nanjing',
        label: '南京'
      }, {
        value: 'Chengdu',
        label: '成都'
      }, {
        value: 'Shenzhen',
        label: '深圳'
      }, {
        value: 'Zhejiang',
        label: '浙江'
      }],
      value: '',
      tableData: [{
        date: '2016-05-02',
        name: '科迪',
        address: '北京市东城区',
        price:'288'
      }, {
        date: '2016-05-04',
        name: '王虎',
        address: '江苏省南京市浦口区',
        price:'288'
      }, {
        date: '2016-05-01',
        name: '胡桃',
        address: '四川省成都市成华区',
        price:'288'
      }, {
        date: '2016-05-03',
        name: '张饶',
        address: '浙江省温州市永嘉县',
        price:'288'
      }],
    }
  },
  methods: {
    search() { 
				// 每次搜索前 把之前的数据清空
				this.result = [];
				// 每次输入的时候，让他显示出来
				this.isShow = true;
				// 遍历拿到item，并判断值是否和input框相似，一样就添加到result数组中
				this.goodsList.map((item, index) => {
					if (item.includes(this.keywords)) {
						this.result.push(item);
					}
				});
				// 存数据之前  如果历史记录中有的话，就不让添加  ！取反
				if (!this.searchHistory.includes(this.keywords)) {
					// 搜索记录会添加那些的input框的关键字
					this.searchHistory.push(this.keywords);
				}
			},
			// 实时的搜索的数据  根据传的参数，拿到event的对象
			getData(event) {
				// 监听event的事件  当键盘码是13的话，就让实时的列表隐藏
				if (event.keyCode == 13) {
					this.isShow = false;
					return; //方法结束，不执行
				}
				// 每次搜索前 把之前的数据清空
				this.data = [];
				// 当他按下回车的时候也没有，即，不会显示实时更新的一部分
				this.isShow = true;
				this.goodsList.map((item, index) => {
					if (item.includes(this.keywords)) {
						this.data.push(item);
					}
				})
			},
      // 实时的搜索的数据  根据传的参数，拿到event的对象
			getData(event) {
				// 监听event的事件  当键盘码是13的话，就让实时的列表隐藏
				if (event.keyCode == 13) {
					this.isShow = false;
					return; //方法结束，不执行
				}
				// 每次搜索前 把之前的数据清空
				this.data = [];
				// 当他按下回车的时候也没有，即，不会显示实时更新的一部分
				this.isShow = true;
				this.goodsList.map((item, index) => {
					if (item.includes(this.keywords)) {
						this.data.push(item);
					}
				})
			},
      // 当他失去焦点的时候，会隐藏实时的列表
			hiddenData() {
				this.isShow = false;
			},
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    }
  }
}

</script>
